<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>宝宝树</title>
	<link rel="stylesheet" href="./css/demo.css" />

	<style>

		body{
			margin :0px;
			padding:0px; 
			background:#EDEDED;
		}
		.sec_box_class{
			width: 1190px;
			height: 515px;
			margin:0 auto;
			margin-bottom: 44px;
			}

		.sb_left_class{
			width: 190px;
			height: 515px;
			float: left;
		}
		.sb_center_class{
			width: 510px;
			height: 515px;
			float: left;
			margin-left:10px;
			margin-right:10px;
		}
		.sb_right_class{
			width: 470px;
			height: 515px;
			float: left;
		}
		.long_box_1{
			display: block;
			width: 230px;
			height: 340px;
			float: left;
			margin-right:10px;
		}
		.long_box_2{
			display: block;
			width: 230px;
			height: 340px;
			float: right;
		}
		.short_box_1{
			display: block;
			width: 230px;
			height: 165px;
			float: left;
			margin-right:10px;
			margin-bottom:10px;
		}
		.short_box_2{
			display: block;
			width: 230px;
			height: 165px;
			float: left;
			margin-bottom:10px;
		}

		.header{
			margin:0 auto;
		}
	</style>
	<script src="./js/jquery-3.2.1.min.js"></script>
</head>
<body>
	<header style="width:1423px; height:208px;margin:0 auto;">
		<div class="menu_area">
		  <div class="menu_wrap">
<!-- 		  	<div class="all_catalog1">
		      <h4 class="all_btn1"><a href="http://www.bagtree.com/all_goods" target="_blank">全部商品分类</a><i class="cicl_arr1"></i></h4>
    		</div> -->
		    <div id="test" class="channel">
		      <ul>
		        <li class="indexBgRed newNav09111"><a href="#" class="redColor"> <span>首页</span> </a></li>
		        <li class=" newNav09112"><a href="#"> <span>真皮女包</span> </a></li>
		        <li class=" newNav09113"><a href="#"> <span>萌趣女包</span> </a></li>
		        <li class=" newNav09114"><a href="#"> <span>轻潮男包</span> </a></li>
		        <li class=" newNav09115"><a href="#"> <span>品牌特卖</span> </a></li>
		        <li class=" newNav09116"><a href="#"> <span>全部商品</span> </a></li>
		      </ul>
		    </div>
		  </div>
		</div>
	</header>

	<section class = "sec_box_class">
		<div class = "sb_left_class" ><img src='./images/sb_1_left.gif' width="100%" height="100%"></div>
		<div class = "sb_center_class">
			<a href="#">
			<img src='./images/sb_1_center.jpg' width="100%" height="65%">
		</div>
		<div class = "sb_right_class">
			<a href ="#" class = "short_box_1">
				<img src='./images/1.1.jpg' width="100%" height="100%">
			</a>
			<a href ="#" class = "short_box_2">
				<img src='./images/1.2.jpg' width="100%" height="100%">
			</a>
			<a href ="#" class = "long_box_1">
				<img src='./images/1.3.jpg' width="100%" height="100%">
			</a>
			<a href ="#" class = "short_box_2">
				<img src='./images/1.4.jpg' width="100%" height="100%">
			</a>
			<a href ="#" class = "short_box_2">
				<img src='./images/1.5.jpg' width="100%" height="100%">
			</a>
		</div>
	</section>


	<section class = "sec_box_class">
		<div class = "sb_left_class"><img src='./images/sb_2_left.gif' width="100%" height="54%"></div>
		<div class = "sb_center_class">
			<a href="#">
			<img src='./images/sb_2_center.jpg' width="100%" height="100%">
		</div>
		<div class = "sb_right_class">
			<a href ="#" class = "short_box_1">
				<img src='./images/2.1.jpg' width="100%" height="100%">
			</a>
			<a href ="#" class = "short_box_2">
				<img src='./images/2.2.jpg' width="100%" height="100%">
			</a>
			<a href ="#" class = "short_box_1">
				<img src='./images/2.3.jpg' width="100%" height="100%">
			</a>
			<a href ="#" class = "long_box_2">
				<img src='./images/2.4.jpg' width="100%" height="100%">
			</a>
			<a href ="#" class = "short_box_1">
				<img src='./images/2.5.jpg' width="100%" height="100%">
			</a>

		</div>
	</section>

	<section class = "sec_box_class">
		<div class = "sb_left_class"><img src='./images/sb_3_left.gif' width="100%" height="100%"></div>
		<div class = "sb_center_class">
			<a href="#">
			<img src='./images/sb_3_center.jpg' width="100%" height="100%">
		</div>
		<div class = "sb_right_class">
			<a href ="#" class = "short_box_1">
				<img src='./images/3.1.jpg' width="100%" height="100%">
			</a>
			<a href ="#" class = "short_box_2">
				<img src='./images/3.2.jpg' width="100%" height="100%">
			</a>
			<a href ="#" class = "short_box_1">
				<img src='./images/3.3.jpg' width="100%" height="100%">
			</a>
			<a href ="#" class = "long_box_2">
				<img src='./images/3.4.jpg' width="100%" height="100%">
			</a>
			<a href ="#" class = "short_box_1">
				<img src='./images/3.5.jpg' width="100%" height="100%">
			</a>

		</div>
	</section>

	<section class = "sec_box_class">
		<div class = "sb_left_class"><img src='./images/sb_4_left.gif' width="100%" height="100%"></div>
		<div class = "sb_center_class">
			<a href="#">
			<img src='./images/sb_4_center.jpg' width="100%" height="100%">
		</div>
		<div class = "sb_right_class">
			<a href ="#" class = "short_box_1">
				<img src='./images/4.1.jpg' width="100%" height="100%">
			</a>
			<a href ="#" class = "short_box_2">
				<img src='./images/4.2.jpg' width="100%" height="100%">
			</a>
			<a href ="#" class = "short_box_1">
				<img src='./images/4.3.jpg' width="100%" height="100%">
			</a>
			<a href ="#" class = "long_box_2">
				<img src='./images/4.4.jpg' width="100%" height="100%">
			</a>
			<a href ="#" class = "short_box_1">
				<img src='./images/4.5.jpg' width="100%" height="100%">
			</a>

		</div>
	</section>

	<section class = "sec_box_class">
		<div class = "sb_left_class"><img src='./images/sb_5_left.gif' width="100%" height="100%"></div>
		<div class = "sb_center_class">
			<a href="#">
			<img src='./images/sb_5_center.jpg' width="100%" height="100%">
		</div>
		<div class = "sb_right_class">
			<a href ="#" class = "short_box_1">
				<img src='./images/5.1.jpg' width="100%" height="100%">
			</a>
			<a href ="#" class = "long_box_2">
				<img src='./images/5.2.jpg' width="100%" height="100%">
			</a>
		</div>
	</section>

	<footer>
		网页尾部
	</footer>

	<script>
		$(function (){
			$("#test li a").click(function(){
				$(this).addClass("redColor").parent().siblings().children().removeClass("redColor")
			})
			$("#test li a").mouseenter(function(){
				$(this).addClass("redColor")
			})
			$("#test li a").mouseleave(function(){
				$(this).removeClass("redColor")
			})
		})
	</script>
</body>
</html>